<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
    </script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/commodity.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
</head>
<body>
  <header>
    <div class="head">
        <a href=""><i class="iconfont" style="margin-right:0.18rem;">&#xe636;</i><span>商品</span></a>
    </div>
  </header>
  <nav>
    <div class="onediv">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide llun"><img src="../imgs/shop-02.jpg" alt=""></div>
          <div class="swiper-slide llun"><img src="../imgs/shop-02.jpg" alt=""></div>
          <div class="swiper-slide llun"><img src="../imgs/shop-02.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </nav>
  <section>
    <div class="ones1">
      <ul>
        <li class="oe1li1">
          甜橙固体饮料
        </li>
        <li class="oe1li2">
          <div class="o1idv">
            <span>￥<font>20</font></span>
            市场价￥30
          </div>
          <span class="o1isp1">一件起订</span>
        </li>
        <li class="oe1li3">
          <span>销量: 76584</span>
          <span>库存: 200000件</span>
        </li>
        <li class="oe1li4">
          <span><i><img src="../imgs/shop-19.png" alt=""></i>正品保证</span>
          <span><i><img src="../imgs/shop-19.png" alt=""></i>售后保障</span>
          <span><i><img src="../imgs/shop-19.png" alt=""></i>包邮</span>
        </li>
      </ul>
    </div>
    <div class="ones2">
      <a href="">
        <div class="oe2dv1">
          <span>已选择 甜橙固体饮料</span>
          <span><img src="../imgs/shop-08.png" alt=""></span>
        </div>
      </a>
      <div class="oe2dv2">
        <span  class="o2vsp1">商品数量</span>
        <div class="o2v1">
          <span class="o2vsp2 butn1"><img src="../imgs/shop-20.png" alt=""></span>
          <span class="o2vsp3"><input type="text" value="1"></span>
          <span class="o2vsp4 butn2"><img src="../imgs/shop-21.png" alt=""></span>
        </div>
      </div>
    </div>
    <div class="ones3">
      <a href="">
        <div class="oe4f">
          返回首页
        </div>
      </a>
      <a href="">
        <div class="oe4l">
          立即购买
        </div>
      </a>
    </div>
  </section>
</body>
</html>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/swiper-3.4.2.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: '.swiper-pagination',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  autoHeight: true ,
  observer:true,
  observeParents:true,
  autoplay : 1000
});
</script>
<script>
  $(document).ready(function(){
    $('.butn1').click(function(){
      var baue = $('.o2vsp3 input').val();
      if(baue == 0){
        baue = 0;
      }else{
        var baue=parseInt($('.o2vsp3 input').val())-1;
      }
      $('.o2vsp3 input').val(baue);
    });
    $('.butn2').click(function(){
        var value=parseInt($('.o2vsp3 input').val())+1;
        $('.o2vsp3 input').val(value);
    });
  });
</script>